body {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.cushion{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background: url(../img/copper2.png);
  background-size: 8% auto;
  z-index: 1!important;
}
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  display: none;
}
.page_one{
  position: relative;
  margin:0 auto;
}
.page_three{
  display: block;
}
/* 第1屏逻辑 */
.bg_3,
.bg_4,
.bg_1 {
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center bottom;
}

.bg_1 {
  background-image: url(../img/bg_1.jpg);
}
.bg_2{
  background-repeat: repeat-x;
  background-size: auto 100%;
}
.bg_3 {
  b-ackground-image: url(../img/ji.jpg);
  background-position: center center;
}
.bg_4 {
  background-image: url(../img/ji_sign.jpg);
  background-position: center center;
}
.deg90 {
  transform: rotate(90deg);
}
.deg0 {
  transform: rotate(0deg);
}
#zuoyi {
  position: absolute;
  z-index: 999;
  left: 7.5%;
  bottom: 20%;
  width:42%;
  height:33%;
}
.scroll {
  position: relative;
  display: block;
  width: 100%;
  height : 50%;
  top :22%;
  animation: floatUpDown 2s infinite;
  margin: 0 auto 0;
}
@keyframes floatUpDown {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(15%);
  }
  100% {
    transform: translateY(0%);
  }
}
.finger_ani_wrapper {
  position: absolute;
  bottom: 20.5%;
  left: 27%;
  overflow: hidden;
  width: 80%;
  margin: 0 auto;
}

.circle {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -28% 0 0 -18%;
  background: url("../img/circle.png") center center no-repeat;
  width: 27%;
  height: 27%;
  background-size: 100%;
  animation-delay: 0.3s;
  transform-origin: center center;
}
.circle1 {
  animation: circleHide 1s ease-in-out infinite;
}
.circle2 {
  margin: -35% 0 0 -25%;
  width: 41%;
  height: 41%;
  animation: circleHide2 1s ease-in-out infinite;
}
.circle3 {
  margin: -41% 0 0 -32%;
  width: 55%;
  height: 55%;
  animation: circleHide3 1s ease-in-out infinite;
}
.finger {
  background: url("../img/finger1.png") center center no-repeat;
  background-size: 100%;
  width: 33.3%;
  height: 47%;
  margin: 30% auto;
  animation: fingerHandle 1s ease infinite both;
}
@keyframes fingerHandle {
  0% {
    background: url("../img/finger1.png") center center no-repeat;
    background-size: 100%;
  }
  50% {
    background: url("../img/finger2.png") center center no-repeat;
    background-size: 100%;
  }
  100% {
    background: url("../img/finger2.png") center center no-repeat;
    background-size: 100%;
  }
}
@keyframes circleHide {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }
  40% {
    opacity: 1;
  }
  75% {
    opacity: 0;
    transform: scale3d(1.5, 1.5, 1.5);
  }
}
@keyframes circleHide2 {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }
  40% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scale3d(1.5, 1.5, 1.5);
  }
}
@keyframes circleHide3 {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);
  }
  40% {
    opacity: 0.8;
  }
  100% {
    opacity: 0;
    transform: scale3d(1.5, 1.5, 1.5);
  }
}

/* 第2屏逻辑 */
#fuwa {
  position: absolute;
  width:30%;
  height:25%;
  bottom: 10.5%;
  z-index: 1000;
}
.money_list,
.bg,
.wrapper {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.roof {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 27%;
}
.run_stage {
  position: absolute;
  height: 73%;
  left: 0;
  bottom: 27%;
  font-size: 0;
  overflow: hidden;
  background-image: url(../img/move_bg.png);
  b-ackground-repeat: no-repeat;
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: auto 100%;
}
.bg_2 {
  background-image: url(../img/bg_2.jpg);
  background-position: left bottom;
}
.score_list {
  position: absolute;
  left: 0;
  top: 5%;
  width: 100%;
  height:16%;
  z-index: 999;
}
.score_wrapper {
  display: -webkit-box;
  width:70%;
  margin:auto;
}
.score_cell {
  position: relative;;
  -webkit-box-flex: 1;
  flex-grow: 1;
  text-align: center;
  color: #ffa42f;
  font-weight: bold;
  line-height: 1;
  perspective: 200px;
}
.score_cell img {
  height: 70%;
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: all 1s linear;
}
.score_cell p{
  font-size : 4em;
}
.score_cell img.active {
  tr-ansform: rotateY(360deg);
  animation: rotate2 1s linear;
}
.money_list {
  perspective: 200px;
}
.money_list .money_cell {
  position: absolute;
  perspective: 200px;
  opacity: 0;
}
.rotate_money .money_cell_sub {
  width:5%;
  height:5%;
  perspective: 200px;
  transform-style: preserve-3d;
  transform-origin: center center;
  animation: rotate;
  animation-iteration-count: infinite;
}
.rotate_money img {
  width:0;
  height:0;
  transform-style: preserve-3d;
  animation: rotate2;
  animation-iteration-count: infinite;
}
@keyframes rotate2 {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}
@keyframes rotate {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(50%);
  }
  100% {
    transform: translateY(0%);
  }
}
/* 祝福语相关 */
@keyframes open {
  0% {
    opacity: 0;
    -webkit-transform: rotateX(-120deg);
  }
  40% {
    -webkit-transform: rotateX(30deg);
  }
  60% {
    -webkit-transform: rotateX(-20deg);
  }
  80% {
    -webkit-transform: rotateX(10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
  }
}
@keyframes fadeInOut {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.wrap {
  position: absolute;
  width: 1rem;
  perspective: 1000px;
  position: relative;
  z-index: 999;
}
.fadeInOut {
  animation: fadeInOut 5s;
}
.wrap h2 {
  height: 1rem;
  b-ackground: #df3329;
  text-align: center;
  line-height: 1rem;
  color: #fff;
  position: relative;
  z-index: 2;
  font-size: 0 !important;
}
.wrap div {
  position: absolute;
  top: 1rem;
  left: 0;
  transform-style: preserve-3d;
  transform-origin: top;
  transform: rotateX(-120deg);
  transition: 0.5s;
}
.wrap > div {
  top: 1rem;
}
.wrap .open {
  animation: open 2s;
  transform: rotateX(0deg);
}
.wrap span {
  display: block;
  width: 1rem;
  height: 1rem;
  line-height: 1rem;
  color: #fff;
  transition: 1s;
  text-align: center;
  font-size: 0 !important;
  background: url(../img/text_1.png) no-repeat center center;
  background-size: 100% auto;
}
.wrap .open > span {
  b-ox-shadow: inset 0 0 1rem 0.5rem rgba(0, 0, 0, 0);
}
.page_one {
  z-index: 990;
}
.page_two {
  z-index: 998;
}
.page_three,
.page_four {
  z-index: 1999;
}
/* 模糊设置 */
.blur {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  left: 0;
  bottom: 0;
  filter: blur(10px);
  -webkit-filter: blur(18px);
  -moz-filter: blur(18px);
  -ms-filter: blur(18px);
  -o-filter: blur(18px);
  z-index: 0;
  display: block;
  z-index: 99;
}
.loading_progress {
  position: fixed;
  left: 0;
  top: 50%;
  right : 0;
  bottom : 0;
  margin-top: -0.5rem;
  text-align: center;
  color:rgba(255, 255, 255, 0.6);
  font-size: 1rem;
  height:1rem;
  z-index: 1000;
  line-height: 100%;
}
#content {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  z-index: 9999;
}
#blur {
  p-osition: absolute;
  t-op: 0;
  margin: 0 auto;
  height:100%;
  filter: blur(10px);
  -webkit-filter: blur(20px);
  -moz-filter: blur(20px);
  -ms-filter: blur(20px);
  -o-filter: blur(20px);
  z-index: 0;
  display: block;
  background-color: #ffbb50;
}
#canvas {
  position: absolute;
  margin: 0 auto;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
}
/* 碎裂背景样式 */
.seg_bg{
  position: relative;
  margin: 0 auto;
  padding: 0;
  font-size: 0;
}
.seg_bg li{
  position: relative;
  float: left;
  width : 25%;
  height : 25%;
  -webkit-perspective: 300px;
	perspective: 300px;
}
.rotate90{
  transform: rotateY(-90deg);
}
.rotate180{
  transform: rotateY(-180deg);
}
.block_list {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
  position: relative;
  transition: all 2s;
	
}
.block_list div {
  position: absolute;
  top:0;
  left:100%;
	width: 100%;
	height: 100%;
	
	transform-origin: left;
	transform-style: preserve-3d;
	transform: rotateY(90deg);
}
.block_list > div {
	left: 0;
	transform: rotateY(0deg);
}
.block_list span {
	width: 100%;
	height: 100%;
	display: block;
}
/* 触摸层 */
#touch_layer_one,
#touch_layer_two{
  display:block;
  z-index:10000;
}

.block_list span {
  width: 100%;
  height: 100%;
  display: block;
}

/* 触摸层 */

#touch_layer_one,
#touch_layer_two {
  display: block;
  z-index: 10000;
}
.once_more{
  position: absolute;
  left:50%;
  bottom: 15%;
  width:364px;
  height:108px;
  background: url(../img/once_more.png) no-repeat;
  background-size: 100% auto;
  display: none;
  
}